<template>
  <view class="" style="height: 100%;">
    <scroll-view style="height: 100%;" enable-back-to-top :refresher-triggered="pullLoading"
      refresher-background="#f5f5f5" :refresher-enabled="pullSwitch" class="list-scroll-content" scroll-x
      :refresher-threshold="80" @refresherrefresh="e => refresherrefresh(e, tabIndex)"
      @refresherrestore="refresherrestore" @refresherabort="refresherabort">
      <view class="">
        <!-- 医生 -->
        <view class="" v-show="tabIndex == 0">
          <famous-doctor @click="toPage(`server/doctor?id=${item.id}`, false)" @clickAskDoctor="goPages('即时', item)"
            v-for="(item) in navList[0].dataList" :key="item.id" :obj="item"></famous-doctor>
          <u-loadmore :status="navList[0].status" />
        </view>
        <!-- 医院 -->
        <view class="" v-show="tabIndex == 1">
          <dataItemHos :dataList='navList[1].dataList' v-if="navList[1].dataList && navList[1].dataList.length > 0">
          </dataItemHos>
          <u-loadmore :status="navList[1].status" />
        </view>
      </view>
    </scroll-view>
    <!-- 选择问诊方式 -->
    <u-popup @touchmove.prevent :show="show" @close="close" @open="open" mode="bottom" :round="10" :closeable="true">
      <view class="ways" @touchmove.prevent>
        <view class="waysTitle">选择问诊方式</view>
        <view class="waysContent" @tap="goPages('即时', circleListOne.imInquiryAmount)"
          v-if="circleListOne && circleListOne.imInquiryFlag == 1">
          <view class="" style="display: flex;align-items: center;">
            <view class="waysIamgeView">
              <u--image :src="imgPathOne1" width="80rpx" height="80rpx"></u--image>
            </view>
            <view class="waysText">
              <view>即时问诊</view>
              <view>对话沟通，效率更高</view>
            </view>
          </view>
          <view class="price">¥{{ circleListOne ? circleListOne.imInquiryAmount : '' }}</view>
        </view>

        <view class="waysContent" @tap="goPages('图文', circleListOne.imgInquiryAmount)"
          v-if="circleListOne && circleListOne.imgInquiryFlag == 1">
          <view class="" style="display: flex;align-items: center;">
            <view class="waysIamgeView">
              <u--image :src="imgPathOne2" width="80rpx" height="80rpx"></u--image>
            </view>
            <view class="waysText">
              <view>图文问诊</view>
              <view>图文描述，医生准确判断病情</view>
            </view>
          </view>
          <view class="price">¥{{ circleListOne ? circleListOne.imgInquiryAmount : '' }}</view>
        </view>

        <view class="waysContent" @tap="goPages('电话', circleListOne.phoneInquiryAmount)"
          v-if="circleListOne && circleListOne.phoneInquiryFlag == 1">
          <view class="" style="display: flex;align-items: center;">
            <view class="waysIamgeView">
              <u--image :src="imgPathOne3" width="80rpx" height="80rpx"></u--image>
            </view>
            <view class="waysText">
              <view>电话问诊</view>
              <view>沟通更快捷，判断更到位</view>
            </view>
          </view>
          <view class="price">¥{{ circleListOne ? circleListOne.phoneInquiryAmount : '' }}</view>
        </view>
      </view>
    </u-popup>

    <!-- 接口请求失败 -->
    <u-action-sheet @select="onSelect" @close="sheetShow = false" cancelText="取消" :closeOnClickOverlay="true"
      :closeOnClickAction="true" safeAreaInsetBottom :actions="actions" :show="sheetShow"></u-action-sheet>
    <view class="">
      <u-empty v-if="showErr" text="服务连接异常" mode="wifi" icon="http://cdn.uviewui.com/uview/empty/wifi.png"></u-empty>
    </view>
  </view>
</template>

<script>
import pageMixin from '@/mixins/pageMixin';
import { mapState } from 'vuex';
import { medicalDoctor, localHospital } from '@/api/medical/medical.js';
import { bd09towgs84, bd09togcj02 } from '@/utils/coordinateChange.js';
import lazyLoad from '@/components/muqian-lazyLoad/muqian-lazyLoad.vue';
import dataItemHos from './dataItemHos.vue'
import famousDoctor from './famousDoctor.vue'

export default {
  mixins: [pageMixin],
  components: { lazyLoad, dataItemHos, famousDoctor },
  data() {
    return {
      pullLoading: false, //下拉刷新标识
      pullSwitch: true, //开启自定义下拉刷新
      tagStyle: {
        fontSize: '26rpx',
        display: 'inline-block',
        color: '#1a1a1a',
        lineHeight: '24px',
        background: '#f5f5f5',
        borderRadius: '12rpx',
        textAlign: 'center',
        padding: '5rpx 20rpx',
        margin: '0px'
      },
      show: false,
      imgPathOne1: 'https://res.jiyaqi.com/pet/miniapp/medical/wz1.png',
      imgPathOne2: 'https://res.jiyaqi.com/pet/miniapp/medical/wz2.png',
      imgPathOne3: 'https://res.jiyaqi.com/pet/miniapp/medical/wz3.png',
      tagHospital: [
        {
          name: '综合医院',
          bgColor: 'rgba(92,140,255,0.1)',
          fsColor: 'rgba(92,140,255,1)'
        },
        {
          name: '甲级一等',
          bgColor: 'rgba(124,104,250,0.1)',
          fsColor: 'rgba(124,104,250,1)'
        },
        {
          name: '综合医院',
          bgColor: 'rgba(255,135,15,0.1)',
          fsColor: 'rgba(255,135,15,1)'
        }
      ],
      circleList: [], //列表数据
      circleListHos: [], //列表数据
      pages: {
        pageNum0: 1,
        pageNum1: 1
      },
      circleListOne: null,
      showErr: false,
      tabIndex: 0,
      bottom: '',
      navList: [
        {
          tabIndex: 0, //下标
          status: 'loadmore', //加载 loadmore/ loading / nomore
          dataList: [], // 数据
          loaded: false,
          pageNum: 1
        },
        {
          tabIndex: 1,
          status: 'loadmore',
          dataList: [],
          loaded: false,
          pageNum: 1
        }
      ],
      //导航专用参数
      mapsPackageNames: ['com.baidu.BaiduMap', 'com.autonavi.minimap', 'com.tencent.map'],
      iosURLTypes: ['baidumap://', 'iosamap://', 'qqmap://'],
      gotoUrlArr: [], //地图地址
      sheetShow: false,
      actions: []
    };
  },
  computed: {
    ...mapState('user', ['address'])
  },
  methods: {
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(tabIndex, bottom) {
      // bottom 代表触底
      console.log('address==================================', this.address);

      this.tabIndex = tabIndex;
      this.bottom = bottom;
      // this.navList[tabIndex].status = 'loading';
      console.log('上拉==============');

      if (tabIndex == 0) {
        // 医生
        if (!bottom && this.navList[tabIndex].loaded) {
          // 加载过
          return;
        }
        if (this.navList[tabIndex].status == 'loading' || this.navList[tabIndex].status == 'noMore') {
          //防止重复加载
          return;
        }
        this.navList[tabIndex].status = 'loading';
        let params = {
          pageEnable: 1, //是否需要分页,0:不分页,1:分页
          pageNum: this.navList[tabIndex].pageNum,
          pageSize: 10
        };
        console.log(params, 'params');
        medicalDoctor(params)
          .then(res => {
            // console.log(res, '上拉加载的回调-- 医生');
            //设置列表数据
            this.navList[tabIndex].loaded = true; // 是否加载过
            this.showErr = false;
            if (this.navList[tabIndex].pageNum == 1) this.circleList = []; //如果是第一页需手动制空列表
            this.navList[tabIndex].status = 'loadmore';
            if (res.list && res.list <= 0) {
              this.navList[tabIndex].status = 'nomore';
            } else {
              this.navList[tabIndex].pageNum++; //追加页码
            }
            this.navList[tabIndex].dataList = this.navList[tabIndex].dataList.concat(res.list); //追加新数据
            this.pullLoading = false;
          })
          .catch(err => {
            //联网失败, 结束加载
            console.log(err, '获取数据失败err');
            this.showErr = true;
            this.pullLoading = false;
          });
      } else if (tabIndex == 1) {
        if (!bottom && this.navList[tabIndex].loaded) {
          // 加载过
          return;
        }
        if (this.navList[tabIndex].status == 'loading' || this.navList[tabIndex].status == 'noMore') {
          //防止重复加载
          return;
        }
        this.navList[tabIndex].status = 'loading';
        //医院
        let params = {
          cityName: this.address ? this.address.city : null, //城市名称 //合肥市
          latitude: this.address ? this.address.latitude : null, //维度 //  31.834891
          longitude: this.address ? this.address.longitude : null, //经度 // 117.098929
          pageEnable: 1, //是否需要分页,0:不分页,1:分页
          pageNum: this.navList[tabIndex].pageNum,
          pageSize: 10
        };
        localHospital(params)
          .then(res => {
            // console.log(res, '上拉加载的回调-- 医生');
            this.navList[tabIndex].loaded = true; // 是否加载过
            this.showErr = false;
            if (this.navList[tabIndex].pageNum == 1) this.circleList = []; //如果是第一页需手动制空列表

            this.navList[tabIndex].status = 'loadmore';
            if (res.list && res.list <= 0) {
              this.navList[tabIndex].status = 'nomore';
            } else {
              this.navList[tabIndex].pageNum++; //追加页码
            }
            this.navList[tabIndex].dataList = this.navList[tabIndex].dataList.concat(res.list); //追加新数据
            this.pullLoading = false;
          })
          .catch(err => {
            //联网失败, 结束加载
            console.log(err, '获取数据失败err');
            this.showErr = true;
            this.pullLoading = false;
          });
      }
    },
    toChat(id, nickName) {
      console.log(nickName, 'nickName=====');
      this.toPage(`/packageMedical/pages/TUI-Chat/chat?conversationID=C2C${id}&nickName=${nickName}`);
    },
    open() {
      // console.log('open');
    },
    close() {
      this.show = false;
    },
    //点击问医生
    clickAskDoctor(item) {
      this.circleListOne = item;
      this.show = true;
    },
    goPages(type, item) {
      // this.circleListOne.item = item;
      // this.toPage(`/packageMedical/pages/medical/choosePet?type=${type}&circleListOne=${JSON.stringify(this.circleListOne)}`);
      this.getlastOrder(item.id).then(res => {
        if (!res.list.length) {
          this.toPage(`/packageMedical/pages/medical/choosePet?type=${type}&circleListOne=${JSON.stringify(item)}`);
        } else uni.$u.toast('您与该医生有正在进行中的问诊')
      })
    },
    mapNavigate(hosItem) {
      let txList = bd09togcj02(hosItem.longitude, hosItem.latitude);
      let ggList = bd09towgs84(hosItem.longitude, hosItem.latitude);
      console.log(txList, ggList, '转码后的坐标系');
      this.gotoUrlArr = [];
      this.actions = [];
      this.operationAfterCheckInstall(
        this.mapsPackageNames,
        res => {
          console.log(res, 'operationAfterCheckInstall的res--');
          var m = 0,
            gotoUrl = ''; //m:记录本机地图app个数，gotoUrl：记录实际直接跳转地址
          var btnArray = []; //实际显示按钮数组
          var btnTitle = ['使用百度地图导航', '使用高德地图导航', '使用腾讯地图导航'];
          var urlArray = []; //实际显示跳转地址数组
          //百度api文档：http://lbsyun.baidu.com/index.php?title=uri/api/android
          //高德api文档：https://lbs.amap.com/api/amap-mobile/guide/ios/route
          //腾讯api文档：https://lbs.qq.com/webApi/uriV1/uriGuide/uriMobileRoute
          var andrUrl = [
            'baidumap://map/direction?origin=&destination=' +
            'name:' +
            hosItem.name +
            '|latlng:' +
            hosItem.latitude +
            ',' +
            hosItem.longitude +
            '&coord_type=bd09ll&mode=driving&src=andr.baidu.openAPIdemo',
            'amapuri://route/plan/?slat=&slon=&dlat=' + ggList[1] + '&dlon=' + ggList[0] + '&dname=' + hosItem.name + '&dev=1&t=0',
            'qqmap://map/routeplan?type=drive&fromcoord=CurrentLocation&tocoord=' +
            txList[1] +
            ',' +
            txList[0] +
            '&to=' +
            hosItem.name +
            '&referer=FMKBZ-ZQHLP-AS7D5-L3D2B-YFWQH-TGF6J'
          ];
          var iosUrl = [
            'baidumap://map/direction?origin=&destination=name:' +
            encodeURI(hosItem.name + '|latlng:' + hosItem.latitude + ',' + hosItem.longitude) +
            '&coord_type=bd09ll&mode=driving&src=ios.baidu.openAPIdemo',
            'iosamap://path?sourceApplication=applicationName&dlat=' + ggList[1] + '&dlon=' + ggList[0] + '&dname=' + encodeURI(hosItem.name) + '&dev=1&t=0',
            'qqmap://map/routeplan?type=drive&fromcoord=CurrentLocation&tocoord=' +
            txList[1] +
            ',' +
            txList[0] +
            '&to=' +
            encodeURI(hosItem.name) +
            '&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
          ];
          //根据手机型号确定跳转数组var
          console.log(uni.getSystemInfoSync().osName, 'iosOr安卓');
          if (uni.getSystemInfoSync().osName == 'ios') {
            urlArray = iosUrl;
          } else {
            urlArray = andrUrl;
          }
          res.forEach((item, k) => {
            if (res[k]) {
              m++;
              gotoUrl = urlArray[k];
              this.actions.push({
                name: btnTitle[k]
              });
              this.gotoUrlArr.push(urlArray[k]);
            }
          });
          this.sheetShow = true;
        },
        () => {
          uni.$u.toast('您未安装百度地图、高德地图、腾讯地图,请前往应用市场下载');
        }
      );
    },
    //传入包名，检查手机上是否安装了这个应用
    isInstall(packageName) {
      try {
        if (uni.getSystemInfoSync().osName == 'ios') {
          var UIApplication = plus.ios.importClass('UIApplication');
          var NSURL = plus.ios.importClass('NSURL');

          var app = UIApplication.sharedApplication();
          var bdScheme = NSURL.URLWithString(packageName);
          var install = app.canOpenURL(bdScheme);

          plus.ios.deleteObject(bdScheme);
          plus.ios.deleteObject(app);
          return install;
        } else {
          var main = plus.android.runtimeMainActivity();
          var packageManager = main.getPackageManager();
          var PackageManager = plus.android.importClass(packageManager);
          var packageinfo = packageManager.getPackageInfo(packageName, PackageManager.GET_ACTIVITIES);
          if (packageinfo) {
            return true;
          } else {
            return false;
          }
        }
      } catch (e) {
        return false;
      }
    },
    //批量传入包名，检查一系列应用是否安装，如果有任意一个安装了，就执行success，否认执行fai
    operationAfterCheckInstall(mapsPackageNames, success, fail) {
      console.log('检查包名---');
      var res = mapsPackageNames.map(item => {
        return this.isInstall(item);
      });
      if (eval(res.join('||'))) {
        success(res);
      } else {
        console.log('fail', res);
        fail();
      }
    },
    onSelect(value) {
      var url = '';
      if (value.name == '使用百度地图导航') {
        url = this.gotoUrlArr.find(item => {
          return item.indexOf('baidumap') != -1;
        });
        plus.runtime.openURL(url);
      } else if (value.name == '使用高德地图导航') {
        url = this.gotoUrlArr.find(item => {
          return item.indexOf('amapuri') != -1 || item.indexOf('iosamap') != -1;
        });
        plus.runtime.openURL(url);
      } else if (value.name == '使用腾讯地图导航') {
        url = this.gotoUrlArr.find(item => {
          return item.indexOf('qqmap') != -1;
        });
        plus.runtime.openURL(url);
      }
    },
    refresherrefresh(e, index) {
      console.log(e, index, '自定义下拉刷新被触发');
      this.pullLoading = true;
      this.$set(this.navList, this.tabIndex, {
        tabIndex: this.tabIndex,
        status: 'loadmore',
        dataList: [],
        loaded: false,
        pageNum: 1
      })
      this.upCallback(this.tabIndex, this.bottom)
    },
    refresherrestore(e) {
      console.log(e, '下拉刷新被复位');
    },
    refresherabort(e) {
      console.log(e, '下拉刷新被终止');
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .u-tabs__wrapper__nav__item {
  padding: 0;
  padding-right: 20rpx;
}

.doctor {
  margin: 0 !important;
  margin-bottom: 16rpx !important;
}

.bottom_line {
  border-bottom: 1rpx solid #e6e6e6;
}

.circleItem {
  margin: 30rpx;
  margin-bottom: 25rpx;
}

.ulCommentL {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ul1 {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 25rpx 25rpx 0 25rpx;
  margin-bottom: 20rpx;

  .content {
    display: flex;
    padding-bottom: 20rpx;

    .content-left {
      position: relative;
      // margin: 15px;
      // overflow: hidden;
      border-radius: 50%;

      .iamgeRadius {
        border-radius: 50%;
        overflow: hidden;
      }

      .content-left-shoawBox {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: absolute;
        top: 0;
        left: 0;
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
        overflow: hidden;

        .content-left-shoaw {
          width: 100%;
          height: 40rpx;
          background-color: rgba(0, 0, 0, 0.2);
          display: flex;
          justify-content: center;
          align-items: center;

          text {
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 20rpx;
          }
        }
      }
    }

    .content-right {
      padding-left: 25rpx;
      flex: 1;

      .content-right-v1 {
        display: flex;
        align-items: center;
        margin-top: -8rpx;
      }

      .textOne {
        font-weight: 550;
        color: #1a1a1a;
        line-height: 32px;
        font-size: 32rpx;
      }

      .textTwo {
        background-color: rgba(1, 188, 141, 0.1);
        font-weight: 500;
        color: #FF5900;
        padding: 2px 4px;
        border-radius: 10rpx;
        margin-left: 15rpx;
        font-size: 22rpx;
      }
    }
  }

  .content_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 0;

    .v1 {
      flex: 1;
      display: flex;

      view {
        width: 33%;
      }

      .textOne {
        font-weight: 400;
        color: #1a1a1a;
        line-height: 26rpx;
        font-size: 26rpx;
      }

      .textTwo {
        font-weight: 400;
        color: #ff473d;
        line-height: 26rpx;
        font-size: 26rpx;
        padding-left: 10rpx;
      }
    }

    .askDoctor {
      width: 136rpx;
      height: 56rpx;
      background: #FF5900;
      border-radius: 28rpx;
      color: #fff;
      font-size: 26rpx;
      line-height: 56rpx;
      text-align: center;
      font-size: 26rpx;
    }
  }
}

.ul2 {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx 20rpx 25rpx 20rpx;
  margin-bottom: 20rpx;

  .content {
    display: flex;

    .content-left {
      width: 264rpx;
      height: 198rpx;
      border-radius: 26rpx;
      overflow: hidden;
    }

    .content-right {
      margin-left: 15rpx;
      flex: 1;

      .content-right-one {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2rpx;
      }
    }

    .tagS {
      padding: 5rpx 10rpx;
      font-size: 22rpx;
      line-height: 22rpx;
      margin-right: 10rpx;
    }

    .tagS1 {
      color: rgba(92, 140, 255, 1);
      background-color: rgba(92, 140, 255, 0.1);
    }

    .tagS2 {
      color: #FF5900;
      background-color: rgba(1, 188, 141, 0.1);
    }
  }

  .content_center {
    // height: 60rpx;
    line-height: 24px;
    margin: 10rpx 0;

    .tagS {
      font-size: 26rpx;
      display: inline-block;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 24px;
      background: #f5f5f5;
      border-radius: 12rpx;
      text-align: center;
      padding: 5rpx 20rpx;
      margin-right: 20rpx;
    }
  }

  .content_bottom {
    // margin-top: 15rpx;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 30rpx;
  }

  .content_bottom_top {
    font-weight: 400;
    color: #1a1a1a;
    line-height: 28rpx;
    height: 28rpx;
    font-size: 28rpx;
  }

  .content_bottom_price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 0 0 0;

    .textOne {
      font-weight: 500;
      color: #ff473d;
      line-height: 32rpx;
    }

    .textTwo {
      display: inline-block;
      margin-left: 25rpx;
      font-weight: 400;
      color: #999999;
      line-height: 26rpx;
      border-bottom: 2px solid #999999;
      height: 14rpx;
      font-size: 26rpx;
    }

    .textThree {
      font-weight: 400;
      color: #999999;
      line-height: 24px;
      font-size: 26rpx;
    }

    .textFour {
      font-weight: 400;
      color: #999999;
      line-height: 24px;
      padding-left: 10rpx;
      font-size: 26rpx;
    }
  }
}

.ways {
  min-height: 300rpx;
  border-radius: 15rpx 15rpx 0 0;
  background-color: #f5f5f5;
  padding: 25rpx 20rpx 50rpx 20rpx;

  // background-color: ;
  .waysTitle {
    text-align: center;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 36rpx;
    font-size: 36rpx;
    padding: 50rpx 0;
  }

  .waysContent {
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 35rpx 30rpx;
    background-color: #fff;
    border-radius: 20rpx;

    .waysIamgeView {
      width: 80rpx;
      height: 80rpx;
      overflow: hidden;
      border-radius: 50%;
    }

    .waysText {
      padding-left: 30rpx;

      view:nth-child(1) {
        font-size: 32rpx;
        font-weight: 500;
        color: #1a1a1a;
        line-height: 28rpx;
      }

      view:nth-child(2) {
        font-weight: 400;
        color: #999999;
        line-height: 26rpx;
        font-size: 26rpx;
        padding-top: 15rpx;
      }
    }
  }

  .price {
    font-weight: 400;
    color: #ff473d;
    line-height: 32rpx;
    font-size: 32rpx;
  }
}

.f24 {
  margin-right: 10rpx;
  font-size: 26rpx;
  color: #cccccc;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  /*允许在单词内换行,防止有字母时候出问题*/
  display: -webkit-box;
  /*将对象作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 1;
  /*多行在这里修改数字即可*/
  -webkit-box-orient: vertical;
  /*从上到下垂直排列子元素*/
}
</style>
<style lang="scss">
::v-deep .uni-scroll-view-refresh-inner>svg {
  fill: #999999 !important;
}

::v-deep .uni-scroll-view-refresh__spinner>circle {
  color: #999999 !important;
}

::v-deep .uni-scroll-view-refresh-inner {
  box-shadow: none;
  background: #f5f5f5;
}
</style>
